<template>
  <el-form :class="{'mobile-el-form': showMobilePage}" class="customer-form lineHeight32" label-position="right" label-width="100px">
    <el-row :gutter="8" class="content">
      <el-col :span="8">
        <el-form-item label="创建人:">
          <span>{{ detailData.creator || '--' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建时间:">
          <ToolTip :content="format(detailData.createTime,'YYYY/MM/DD HH:mm:ss')" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="报告更新时间:">
          <ToolTip :content="format(detailData.updateTime,'YYYY/MM/DD HH:mm:ss')" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="资源编号:">
          <ToolTip :content="detailData.reportNumber" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="链接数量:">
          <ToolTip :content="`${detailData.importLinks || 0}条`" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="有效链接:">
          <ToolTip :content="`${detailData.validLink || 0}条`" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="报告状态:">
          <ToolTip :content="detailData.reportStatus?'已完成':'进行中'" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="采集方式:">
          <div>{{ detailData.collectWays | collectWayOptions }}<span>{{ formatShowDate(detailData.collectDate) }}</span><span class="link-text" @click="setColletWay">设置</span></div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="发布播主:">
          <ToolTip :content="detailData.blogger" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="发布平台:">
          <ToolTip :content="detailData.platform" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="通知人员:" >
          <div class="notice-users">
            <CheckUserInfo
              v-if="detailData.followers"
              :user-list="detailData.followers"
              multiple
              label-name="name"
              class="users"
            />
            <div v-else>--</div>
            <span class="link-text" @click="setFollowers">设置</span>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    <setCollectWayDialog ref="setCollectWayDialog" @updateData="updateData"/>
    <setFollowsDialog ref="setFollowsDialog" @updateData="updateData"/>
  </el-form>
</template>

<script>
import { mapState } from 'vuex';
import { format } from '@/filters/date';
import { collectWayOptions } from '@/filters/status';
import setCollectWayDialog from './setCollectWayDialog';
import setFollowsDialog from './setFollowsDialog';

export default {
  components: {
    setCollectWayDialog,
    setFollowsDialog
  },
  filters: { collectWayOptions },
  props: {
    detailData: {
      type: Object,
      default: () => {
        return { collectDate: null };
      }
    },
    id: {
      type: Number | String,
      default: null
    }
  },
  data() {
    return {
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    format,
    setColletWay() {
      this.$refs.setCollectWayDialog.openDialog(this.id, this.detailData);
    },
    setFollowers() {
      this.$refs.setFollowsDialog.openDialog({ id: this.id, followers: this.detailData.followers });
    },
    updateData() {
      this.$emit('updateData');
    },
    formatShowDate(data) {
      if (data && data.length > 0) {
        const date = JSON.parse(JSON.stringify(data));
        date.sort((a, b) => { return a - b; });
        const temp = date.map(item => {
          return this.format(item, 'YYYY/MM/DD');
        }).join('，');
        return `（${temp}）`;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.customer-form {
  &::v-deep {
    .el-form-item {
      margin-bottom: 0px;
      .el-form-item__label {
        color: #999;
      }
    }
  }
  .content{
    .el-col{
      border-right: 1px solid #EBEEFD;
      &:nth-of-type(3n) {
        border-right: none;
      }
    }
  }
}
.link-text {
  color: #406Eff;
  cursor: pointer;
  margin-left: 8px;
}
.mobile-el-form {
  .content {
    display: block;
    .el-col {
      border: none;
      width: 100% !important;
    }
  }
}
.notice-users {
  display: flex;
  align-items: center;
  .users {
    max-width: 120px;
  }
}
</style>
